<template>
  <s-layout :bgStyle="{ color: '#090909' }">
    <uni-swiper-dot mode="default">
      <swiper class="swiper-box">
        <swiper-item v-for="(item, index) in detail.images" :key="index">
          <image class="log-card-img" :src="sheep.$url.static(item)"></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view class="officerDetail">
      <view class="product">
        <view class="product-t">{{ detail.title }}</view>
      </view>
      <view class="product-content" style="margin-top: 20rpx;">
        <view class="tab ss-flex">
          <view class="active">商品详情</view>
        </view>
        <view class="productDetails" v-html="detail.content">
        </view>
      </view>
    </view>
    <su-fixed bottom :val="0" :isInset="false">
      <view class="officialDetail-footer ss-flex ss-col-center ss-row-between">
        <view class="footer-left ss-flex ss-col-bottom">
          <view class="text-price">{{ detail.price && detail.price[0] ? detail.price[0] : '--' }}</view>
        </view>
        <view class="footer-right">
          <button @tap="onConfirm()">购买</button>
        </view>
      </view>
    </su-fixed>
    <PopupActualPayment
      v-model="state.couponInfo"
      :show="state.showCoupon"
      @confirm="onConfirm"
      @close="state.showCoupon = false"
    />
  </s-layout>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import PopupActualPayment from './components/popup-actualPayment/index.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const active = ref(0);
  const commodityRightsList = ref([
    {
      title: '商品名称',
      text: '米其林汽车轮胎',
      id: 0,
    }, {
      title: '流转方式',
      text: '品牌孵化',
      id: 1,
    }, {
      title: '拆配周期',
      text: '93天/轮*4',
      id: 2,
    }, {
      title: '孵化上市',
      text: '2024年4月17日',
      id: 3,
    }, {
      title: '孵化上限',
      text: '40份',
      id: 4,
    }, {
      title: '预期收益',
      text: '3%',
      id: 5,
    }, {
      title: '收益周期',
      text: 'D+8天/次',
      id: 6,
    }, {
      title: '孵化退市',
      text: '2025年4月24日',
      id: 7,
    },
  ]);
  const state = reactive({
    orderPayload: {
      goods_list: [],
    },
    orderInfo: {},
    addressInfo: {},
    invoiceInfo: {},
    totalNumber: 0,
    showCoupon: false,
    couponInfo: [],
    showDiscount: false,
  });
  // 获取商品详情
  const detail = ref({
    'id': 32,
    'type': 'normal',
    'title': '红旗E001',
    'subtitle': '新能源汽车',
    'category_ids': '154',
    'image': '/uploads/20240420/51fb3dc6e2be248ef302c535c5a583ec.png',
    'image_wh': {
      'w': '390',
      'h': '390',
    },
    'images': [
      '/uploads/20240420/4f08e2daaf94bb5ec03a9282662f3fd5.jpg',
      '/uploads/20240420/2eeaf1c15330b9427c5c48d5a8ab66c1.jpg',
      '/uploads/20240420/7df237c0129a99ae422590318e9851ba.jpg',
      '/uploads/20240420/61a3193082fc25497605bb305147b32f.jpg',
      '/uploads/20240420/206555bb4d460d562cab8b6fc446c1cc.jpg',
      '/uploads/20240420/1d843c7451f269d3a6378bf30c93413e.jpg',
    ],
    'params': '',
    'original_price': '129000.00',
    'price': [
      '1.01',
    ],
    'is_sku': 1,
    'limit_type': 'none',
    'limit_num': 0,
    'likes': 0,
    'views': 74,
    'sales': 20,
    'sales_show_type': 'exact',
    'stock_show_type': 'exact',
    'show_sales': 0,
    'service_ids': [],
    'dispatch_type': 'custom',
    'dispatch_id': 0,
    'is_offline': 0,
    'status': 'up',
    'weigh': 0,
    'createtime': '2024-04-20 22:26:57',
    'updatetime': '2024-05-04 11:43:25',
    'deletetime': null,
    'stock': 1980,
    'activity_type': null,
    'service': [],
    'skus': [
      {
        'id': 81,
        'name': '颜色',
        'parent_id': 0,
        'goods_id': 32,
        'weigh': 0,
        'children': [
          {
            'id': 82,
            'name': '白色',
            'parent_id': 81,
            'goods_id': 32,
            'weigh': 0,
          },
          {
            'id': 83,
            'name': '黑色',
            'parent_id': 81,
            'goods_id': 32,
            'weigh': 0,
          },
        ],
      },
    ],
    'activities': [],
    'promos': [],
    'favorite': null,
    'status_text': '上架中',
    'type_text': '实体商品',
    'dispatch_type_text': '服务中心自提',
    'sku_prices': [
      {
        'id': 93,
        'goods_sku_ids': '82',
        'goods_sku_text': [
          '白色',
        ],
        'goods_id': 32,
        'image': '',
        'stock': 998,
        'stock_warning': null,
        'sales': 2,
        'sn': '',
        'weight': '0.01',
        'cost_price': '0.00',
        'original_price': '128000.00',
        'price': '12.00',
        'status': 'up',
        'weigh': 0,
        'createtime': '2024-04-20 22:41:04',
        'updatetime': '2024-05-04 11:43:25',
        'status_text': '上架',
      },
      {
        'id': 94,
        'goods_sku_ids': '83',
        'goods_sku_text': [
          '黑色',
        ],
        'goods_id': 32,
        'image': '',
        'stock': 982,
        'stock_warning': null,
        'sales': 18,
        'sn': '',
        'weight': '0.00',
        'cost_price': '0.00',
        'original_price': '129000.00',
        'price': '1.01',
        'status': 'up',
        'weigh': 0,
        'createtime': '2024-04-20 22:41:04',
        'updatetime': '2024-05-04 11:43:25',
        'status_text': '上架',
      },
    ],
    'content': '<p>商品详情</p>',
  });
  const getData = async (options) => {
    const { code, data } = await sheep.$api.goods.goodsDetail({ ...options });
    if (code === 1) {
      detail.value = data;
      let arr = [
        { goods_id: data.id, goods_num: 1, goods_sku_price_id: data.sku_prices[0].id },
        { goods_id: 33, goods_num: 1, goods_sku_price_id: 95 },
      ];
      state.orderPayload.goods_list = arr;
    }
  };

  onLoad((options) => {
    getData(options);
  });
  // 创建订单&跳转
  async function submitOrder() {
    const {
      code,
      data,
    } = await sheep.$api.order.create(state.orderPayload);
    if (code === 1) {
      if (data.status === 'paid') {
        sheep.$router.redirect('/pages/pay/result', {
          orderSN: data.order_sn,
        });
      } else {
        sheep.$router.redirect('/pages/pay/index', {
          orderSN: data.order_sn,
        });
      }
    }
  }
  //创建订单
  async function getOrderInfo() {
    let {
      code,
      data,
    } = await sheep.$api.order.calc(state.orderPayload);
    if (code === 1) {
      state.totalNumber = 0;
      state.orderInfo = data;
      state.orderInfo.goods_list.forEach((item) => {
        state.totalNumber += item.goods_num;
      });
    }
  }

  async function onConfirm() {
    sheep.$router.redirect('/pages/pay/index', {
      orderSN: '202412233346778746009000',
    });
    // getOrderInfo();
    // submitOrder();
  }
</script>

<style lang="scss" scoped>
  .log-card-img {
    width: 100%;
    height: 100%;
  }

  .officerDetail {
    padding: 15px 15px 110px;
    box-sizing: border-box;
    background-color: #090909;


    .product {
      background: #1C1C1E;
      border-radius: 10px;
      padding: 18px 20px 19px;
      box-sizing: border-box;

      .product-t {
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        margin-bottom: 14.5px;
      }

      .product-b {
        font-weight: 400;
        font-size: 14px;

        .text-1 {
          color: #939393;
        }

        .text-2 {
          color: #13C093;
        }

        view {

        }
      }
    }

    .issuer {
      background: #1C1C1E;
      border-radius: 10px;
      padding: 14px 15px;
      box-sizing: border-box;
      height: 70px;
      margin: 10px 0;

      .issuer-l {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        margin-right: 9px;
      }

      .issuer-r {
        .text-1 {
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          margin-bottom: 6px;
        }

        .text-2 {
          font-weight: 400;
          font-size: 10px;
          color: #888888;
        }
      }
    }

    .product-content {
      background: #1C1C1E;
      border-radius: 10px;
      padding: 24px 15px;
      box-sizing: border-box;

      .tab {
        padding: 0 4px;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 18px;
        color: #767676;
        margin-bottom: 25px;

        view {
          margin-right: 20px;
        }

        .active {
          color: #FFFFFF;
        }

      }

      .productDetails {
        color: $white;

        image {
          width: 100%;
        }
      }

      .commodityRights {
        .title {
          padding: 13px 12px;
          box-sizing: border-box;
          height: 40px;
          background: #221D1A;
          font-weight: 400;
          font-size: 14px;
          color: #DFB581;
        }

        .introduce {
          > view {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #15110E;
            border-bottom: 1px solid #2F2933;
          }

          .text-1 {
            width: 96px;
            font-weight: 300;
            font-size: 13px;
            color: #DFB581;
            border-right: 1px solid #2F2933;
          }

          .text-2 {
            font-weight: 300;
            font-size: 12px;
            color: #AC8866;
          }
        }
      }

    }
  }

  .commodity {
    width: 100%;
    height: 375px;
  }

  .officialDetail-footer {
    padding: 20px 16px;
    box-sizing: border-box;
    height: 90px;
    background: #151515;

    .footer-left {
      .currency {
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
      }

      .text-price {
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
      }
    }

    .footer-right {
      button {
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: linear-gradient(90deg, #45C9F0, #36F6AF);
        border-radius: 25px;
        font-weight: 500;
        font-size: 16px;
        color: #090909;
      }

    }
  }


</style>
